<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:common="http://www.contact.common.com/contacts/ui"
      xmlns:core="http://www.contact.core.com/contacts/core/ui"
      xmlns:a4j="http://richfaces.org/a4j">

<ui:component>

    <!--@elvariable id="id" type="java.lang.String"-->
    <!--@elvariable id="header" type="java.lang.String"-->

    <common:modalPanel id="#{id}"
                       header="#{resources.friendsOfLabel} #{viewFriendBean.informationId}"


            >

        <ui:define name="panelBody">
            <rich:tabPanel selectedTab="#{viewFriendSessionBean.selectedTab}" switchType="client">
                <rich:tab name="allFriendTab" label="#{resources.everyOneLabel}">
                    <a4j:outputPanel layout="block" style="width:150px; margin:5px;">
                        <core:searchTable value="#{viewFriendSessionBean.filterFriend}"
                                          label="Search Friends"
                                          reRender="allFriendsViewTable, mutualFriendsViewTable"
                                          />
                        <!--<h:inputText id="filterFriendInput" autocomplete="on" value="#{viewFriendSessionBean.filterFriend}">-->
                            <!--<a4j:support event="onkeyup" reRender="allFriendsViewTable, mutualFriendsViewTable" ignoreDupResponses="true" requestDelay="700"/>-->
                        <!--</h:inputText>-->
                    </a4j:outputPanel>
                    <rich:separator height="2px" width="100%"/>
                    <a4j:outputPanel layout="block"
                                     style="width:360px; height:330px;">
                        <core:friendViewTable id="allFriends"  value="#{viewFriendBean.allFriends}"/>
                    </a4j:outputPanel>
                </rich:tab>
                <rich:tab rendered="#{not viewFriendBean.isMyFriendView}" name="mutualFriendTab" label="#{resources.mutualFriendsLabel}">
                    <a4j:outputPanel layout="block" style="width:100%; margin:5px;">
                        <h:inputText id="filterMutualFriendInput" autocomplete="on" value="#{viewFriendSessionBean.filterFriend}">
                            <a4j:support event="onkeyup" reRender="mutualFriendsViewTable" ignoreDupResponses="true" requestDelay="700"/>
                        </h:inputText>
                    </a4j:outputPanel>
                    <rich:separator height="2px" width="100%"/>
                    <a4j:outputPanel layout="block"
                                     style="width:360px; height:330px;">
                        <core:friendViewTable id="mutualFriends" value="#{viewFriendBean.allMutualFriends}"/>
                    </a4j:outputPanel>

                </rich:tab>

            </rich:tabPanel>
         

        </ui:define>

        <ui:define name="actionCommand">

            <a4j:commandButton id="resetButton"
                               styleClass="button"
                               type="reset"
                               reRender="#{id}Form"
                               value="Close"
                               onclick="Richfaces.hideModalPanel('#{id}');"/>

        </ui:define>
    </common:modalPanel>


</ui:component>


</html>